<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">人脸信息</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]">
			<form @submit="formSubmit" @reset="formReset">
				<view :style="{marginBottom:100 + 'rpx'}">
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<view class="action item-icon" @tap="jumpdetail">
							{{userinfo.LUSERNAME ? userinfo.LUSERNAME : '请选择'}}
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title">员工号</view>
						<input placeholder="根据姓名获得" type="text" disabled :value="userinfo.LUSERCODE" name="LUSERCODE" />
					</view>
					<view class="cu-form-group">
						<view class="title">手机号</view>
						<input placeholder="根据姓名获得" type="number" disabled :value="userinfo.LMOBILE" name="LMOBILE" />
					</view>
					<view class="cu-form-group">
						<view class="title">邮箱</view>
						<input placeholder="根据姓名获得" type="text" disabled :value="userinfo.LEMAIL" name="LEMAIL" />
					</view>
					<view class="cu-form-group">
						<view class="title">车间</view>
						<input placeholder="根据姓名获得" type="text" disabled :value="userinfo.LPLANTINDEX" name="LPLANTINDEX" />
					</view>
					<view class="cu-form-group">
						<view class="title">班次</view>
						<input placeholder="根据姓名获得" type="text" disabled :value="userinfo.LCLASSINDEX" name="LCLASSINDEX" />
					</view>
					<view class="cu-form-group">
						<view class="title">上传头像</view>
						<view class="grid col-4 grid-square flex-sub" style="justify-content:flex-end">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
	</view>
</template>

<script>
	import ButtonFather from "@/colorui/components/ButtonFather.vue";

	import {
		getselectReferList
	} from "@/service/selectList"
	import {
		postinsert
	} from "@/service/insert"
	import {
		postupdateList
	} from "@/service/updateList"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				imgList: [],
				height: this.screenHeight,
				picker: [],
				userinfo: [],
				index: 0,
				falg: false,
				imagename: ''
			}
		},
		components: {
			ButtonFather
		},
		computed: {
			...mapGetters(['Style', 'getitem', 'Font', 'BackGround', 'BackGroundBox'])
		},
		onShow() {
			// if (this.falg) {
			console.log(this.getitem);
			if (this.getitem) {
				this.userinfo = this.getitem
				if (this.userinfo.LPHOTO) {
					this.imgList[0] =
						`${uni.getStorageSync('IP')}:${uni.getStorageSync('PORT')}/image/UserImage/FaceImage/${this.userinfo.LPHOTO}`
				}
				this.imagename = this.userinfo.LPHOTO
			}
			// }
			// this.falg = true
		},
		onUnload() {
			this.setitem('')
		},
		methods: {
			...mapMutations(['setitem']),
			//跳转选择员工页面
			jumpdetail() {
				uni.navigateTo({
					url: './Classassignmentdetail'
				})
			},
			// ---------------------------上传图片===================================
			ViewImage(e) {
				console.log(this.imgList);
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
						uni.uploadFile({
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/upload/testup',
							filePath: this.imgList[0],
							// files: imgs,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								this.imagename = res.data
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// -----------------------------------------------------------
			formSubmit(e) {
				e.detail.value['LPHOTO'] = this.imagename
				e.detail.value['LUSERNAME'] = this.userinfo.LUSERNAME
				e.detail.value['LID'] = this.userinfo.LID
				//定义表单规则
				var rule = [{
					name: "LUSERCODE",
					checkType: "notnull",
					errorMsg: "请选择员工"
				}, ];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else {
					let bb = {
						table: [e.detail.value],
						dts: []
					}
					let cc = {
						table: [{
							"LISDELETE": false,
							"LISUPDATE": true,
							'LUSERNAME': this.userinfo.LUSERNAME,
							"LISUSED": this.userinfo.LISUSED,
							"LSTATERUN": 0,
							"LUSERCODE": this.userinfo.LUSERCODE
						}, ],
						dts: []
					}
					postupdateList(JSON.stringify(bb), uni.getStorageSync('IP').split("//")[1] + ':' + uni.getStorageSync('PORT'),
						100501, global.userinfo.lusercode).then(res => {
						if (res.data.status == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 3000
							});
							this.setitem('')
							uni.redirectTo({
								url: '../personnel'
							})
						} else {
							uni.showToast({
								title: '添加失败',
								icon: "none"
							});
						}
					})
					postinsert(JSON.stringify(cc), 150301, global.userinfo.lusercode).then(res => {
						if (res.data) {

						}
					})
				}

			},
			formReset(e) {
				console.log(e);
			},
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
</style>
